<template>
	<view class="">
		
	<view class="detail">
    <view class="content">
        <view class="imgWrap">
            
            <image :src="detailsData.img"></image>
            <!-- <image class="icon icon-play" src="/assets/images/i_play.png"></image> -->
        </view>
        <view class="info">
            <view class="item">
                <text>{{ detailsData.nm }}</text>
            </view>
            <view class="item">
                <text v-if="detailsData.sc">***** {{ detailsData.sc }}分</text>
                <text>（{{ detailsData.snum }}万人评）</text>
                <text>{{ detailsData.wish }} 人想看</text>
            </view>
            <view class="item">
                <text>{{ detailsData.cat }} </text>
                <text>{{ detailsData.dur }}分钟</text>
                <text>{{ detailsData.pubDesc }}{{ detailsData.src }}上映</text>
            </view>
        </view>
    </view>
    <view class="btngroup">
        <button><i class="iconfont icon-aixin"></i>想看</button>
		 <!-- bindtap="wantSee" -->
		 <!-- {{xiankanColor}} -->
        <button><i class="iconfont icon-pingfen"></i>评分</button>
    </view>
</view>

<view class="" style="font-size:14px;width:96%;margin:4px auto;">
	<!-- {{openState ? 'open' : ''}} -->
    {{ detailsData.dra}}
</view>

<i class="iconfont open-icon "></i>
 <!-- bindtap="openTap" -->
<!-- {{openState ? 'icon-xiala' : 'icon-shouqi'}} -->
<view class="arrow arrow-up">
    <!-- icon-arrow-up -->
    <i style="font-size:40rpx; color:#1d1b1b;"
       ></i>
	    <!-- bindtap="showLimit" -->
	    <!-- class="iconfont {{arrow_down ? ' icon-down_arrow': ' icon-arrow-up'}}" -->
</view>

<view class="photo">
    <view class="video">
        <text>视频和剧照</text>
        <text>89</text>
    </view>
    <scroll-view scroll-x>
        <view class="container">
            <view v-for="(item,index) in detailsData.photos" class="imgWrap" key="index">
				 <!-- bindtap="previewImage" -->
				 
                <image :src="item" :data-index="index">
                </image>
            </view>
            
        </view>
    </scroll-view>

    <view style="margin:20rpx 0;">
        <video style="width:100%;height:340rpx;" :src="detailsData.videourl"></video>
    </view>
</view>

<button class="buy">优惠购票</button>
	
	</view>
</template>

<script>
	import {details} from "../../api/movieList"
	
	export default {
		data() {
			return {
				detailsData:[]
			}
		},

		methods: {
			aaa(b){
				[b].map((a) =>{
				          return a.img = a.img.replace('w.h/', '')
				        })
				return b
			}
		},
		async onLoad({id}){
			// console.log(id)
			let {data} = await details(id)
			
			this.aaa(data.movie)
			
			this.detailsData = data.movie
			
			
			
		}
		
	}
	
</script>

<style>
	
	.detail {
	  /* background-image: linear-gradient(to right,#6b6c70, #848e97); */
	  padding: 2rem;
	}
	
	.detail .content {
	  display: flex;
	}
	
	
	.detail .content .imgWrap {
	  position: relative;
	  width: 460rpx;
	  height: 360rpx;
	}
	
	.detail .content {
	  display: flex;
	}
	
	.detail .content .imgWrap image {
	  width: 100%;
	  height: 100%;
	}
	
	.detail .content  .info {
	  font-size: 28rpx;
	  padding: 16rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	
	.detail .content  .info .item {
	  display:flex;
	  flex-direction: column;
	}
	
	.detail .content .imgWrap .icon-play {
	  width: 40rpx;
	  height: 40rpx;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate3d(-50%,-50%,0);
	
	}
	
	.detail .btngroup {
	 
	  margin-top: 20rpx;
	  display:flex;
	  justify-content: space-around;
	}
	
	.detail .btngroup button {
	  /* background-color: #9b9481; */
	  background-image: linear-gradient(to right,#6b6c70, #848e97,#6b6c70);
	  height: 80rpx;
	  font-size: 28rpx;
	  flex: 1;
	  margin-right: 20rpx;
	  color: #fff;
	}
	
	.detail .btngroup button:last-child {
	  margin-right: 0;
	}
	
	.detail .btngroup .iconfont {
	  margin-right: 10rpx;
	}
	
	.open{
	  height: 60px;
	  overflow: hidden;
	  transition: all 1s;
	}
	
	.open-icon{
	  height: 20px;
	  margin-top: 8px;
	  display: block;
	  text-align: center;
	  box-shadow: 0px -8px 10px 5px #ececec;
	}
	
	.arrow {
	  color: #e3e3e3;
	  text-align: center;
	
	}
	
	.photo {
	  padding: 2rem;
	  padding-bottom: 6rem;
	  margin-bottom: 40px;
	}
	
	.photo .video {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 20rpx;
	}
	
	.photo .container {
	  display: flex;
	}
	
	.photo .container .imgWrap {
	  height: 180rpx;
	  flex: 0 0 300rpx; /* flex-grow flex-shrink flex-basic */
	  margin-right: 20rpx;
	}
	
	.photo .container .imgWrap image {
	  width: 100%;
	  height: 100%;
	}
	
	
	.buy {
	  color: #fff;
	  background-color: #ef4238;
	  border-radius: 0;
	  font-size: 40rpx;
	  width: 100%;
	  position: fixed;
	  bottom: 0;
	}
	
	
	.movie-want {
	  color: #f5a54f;
	}
	
	
	
	
	
	.xiankan{
	  color: yellow;
	}
</style>
